import { OneModal } from '@/components/one-ui';
import React, { Ref, useEffect, useRef } from 'react';
import { IOneModalRef } from '@/pages/type';
import { onCloseModalCommon } from '@/utils';
import { DescriptionsType, useDescriptionsType } from '@/components/DescriptionsType';
import { Form } from 'antd';
import { DetailTableColumns } from '../mconfig';
import { businessTypeRendering, statusTextOfRendering } from '../common/Format';

const DetailModal: React.FC<Record<string, any>> = ({ onClose, record }) => {
  /**弹框的ref*/
  const modalRef: Ref<IOneModalRef> = useRef(null);
  /**表单实例*/
  const [formRef] = Form.useForm();

  /**表格配置*/
  let [config, { setFieldsValue }] = useDescriptionsType({
    labelWidth: 120,
    basicForm: formRef,
    schemas: DetailTableColumns() as any,
  });

  useEffect(() => {
    let obj = {
      ...record,
      status: statusTextOfRendering(record?.status),
      businessType: businessTypeRendering(record?.businessType),
      dlxx: `${record?.operName || '--'} / ${record?.operIp || '--'} / ${record?.operLocation || '--'}`,
      title: `${record?.title || '--'} / ${businessTypeRendering(record?.businessType) || '--'}`,
    };
    setFieldsValue(obj);
  }, [record]);

  /**确定方法*/
  const onOk = () => {
    onCloseModalCommon(modalRef);
  };
  return (
    <>
      <OneModal
        open={true}
        getContainer={false}
        ref={modalRef}
        title={'操作日志详情'}
        onCancel={onClose}
        onOk={onOk}
        width={document.body.clientWidth * 0.5}
        bodyStyle={{ padding: '5px 10px' }}
      >
        <DescriptionsType config={config} />
      </OneModal>
    </>
  );
};

export default DetailModal;
